<template>
    <userBar v-if="!fullScreen.isFull"></userBar>
    <topBar v-if="!fullScreen.isFull"></topBar>
    <div :class="{'container':true, 'fullContainer':fullScreen.isFull}">
        <navBar v-if="!fullScreen.isFull" />
        <div :class="{'routerBox':true, 'fullRouterBox':fullScreen.isFull}">
          <RouterView />
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import topBar from './components/top/topBar.vue';
import navBar from './components/nav/navBar.vue';
import userBar from './components/user/userBar.vue';
import { fullScreenState } from '@/stores/fullScreenState';

const fullScreen = fullScreenState();

const count = ref(0);

</script>

<style scoped>
.container{
    height: 92vh;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
    top: 8vh;
    z-index: 2;
}
.fullContainer{
  height: 100vh;
  width: 100%;
  position: relative;
  top: 0;
}
.routerBox{
  border-radius: 4px;
  height: 100%;
  width: 97.5%;
  margin-left: 2.5%;
  background-color: #ffffff;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
}
.fullRouterBox{
  height: 100%;
  width: 100%;
  margin: 0;
  transition: all 0.3s ease-in-out;
}
.routerBox_focusNav{
  max-width: 90%;
}
</style>
